<template>
	<view>
		<u-sticky bgColor="#fff">
			<view class="blank10"></view>
			<view class="flex wrapper">
				<view class="">
					<picker :range="modelList" :value="modelIndex" @change="bind_model_change" range-key="label">
						<view class="flex">
							<view class="mr10 text-primary">
								{{modelList[modelIndex].label}}
							</view>
							<u-icon name="arrow-down" size="14" color="#675f91"></u-icon>
						</view>
					</picker>
				</view>
				<view class="flex-1"></view>
				<picker mode="multiSelector" :range="addPickerList" :value="addPickerIndex" @change="bind_add_picker_change" range-key="label">
					<view class="icon-btn ml15">
						<u-icon name="plus" color="#999999" size="14"></u-icon>
					</view>
				</picker>
				
				<view class="icon-btn ml15" @click="openSetting()">
					<u-icon name="setting" color="#999999" size="14"></u-icon>
				</view>
				<view class="ml15 icon-btn" @click="share()">
					<u-icon name="share" color="#999999" size="14"></u-icon>
				</view>
				<view class="ml15">
					<u-button type="info" size="small" text="展开" @click="openAll" style="min-width:30px;padding:0"></u-button>
				</view>
				<view class="ml15">
					<u-button type="info" size="small" text="收起" @click="closeAll" style="min-width:30px;padding:0"></u-button>
				</view>
				<view class="ml15">
					<picker :range="dateList" :value="dateIndex" @change="bind_date_change" range-key="label">
						<u-button type="primary" size="small" text="生成"></u-button>
					</picker>
					
				</view>
			</view>
			<view class="blank10"></view>
			<u-line></u-line>
			<view>
				<view class="plan-col-wrap">
					<template v-for="col in tableHd">
						<view :style="[col.style]" class="plan-col-item tableHd-item">
							<view class="text-primary">
								{{col.title}}
							</view>
						</view>
					</template>
				</view>
			</view>
			<u-line></u-line>
		</u-sticky>
		<view class="blank10"></view>
		<view class="">
			<template v-for="(v,i) in list">
				<dnItem :detail="v" :detailindex="i" @open="openDnItem"  @add="addRow" @reset="resetDnItem" @updata="updataDnItem"
					:hd="tableHd" @bindDish="bindDish" :focus="focusDish"></dnItem>
			</template>
		</view>


		<u-popup :show="settingPopupShow" @close="settingPopupClose" @open="settingPopupOpen" mode="top" :closeable="true">
			<view class="flex justify-center" style="background-color: #f5f5f5;height: 44px;">
				<view>
					设置显示
				</view>
			</view>
			<view class="blank20"></view>
			<view class="wrapper">
				<u-checkbox-group v-model="setting" placement="row">
					<view class="flex" style="flex-wrap: wrap;">
						<view class="">
							显示：
						</view>
						<template v-for="v in settingConfig">
							<view class="" style="margin: 15upx;">
								<u-checkbox activeColor="#675f91" :label="v.label" :name="v.name"></u-checkbox>
							</view>
						</template>
					</view>
				</u-checkbox-group>
			</view>
			<view class="blank20"></view>
			<view class="wrapper" style="background-color: #f5f5f5;">
				<view class="blank20"></view>
				<u-row justify="space-between" gutter="10">
					<u-col span="6">
						<u-button type="info" text="关闭" @click="closeSetting"></u-button>
					</u-col>
					<u-col span="6">
						<u-button type="primary" text="确定" @click="saveSetting"></u-button>
					</u-col>
				</u-row>

				<view class="blank20"></view>
			</view>
		</u-popup>

		<dishEditPopup :disabled="dishEditPopupDisabled" :data="dishEditPopupData" :open="dishEditPopupOpen" @close="closeDishEditPopup" @bind="bindDishEditPopup" @add="addRow"></dishEditPopup>
		<view class="blank"></view>
	</view>
</template>

<script>
	import dnItem from './components/dn-item.vue';
	import dishEditPopup from "@/pagesA/components/dish-edit-popup/dish-edit-popup.vue";
	import unauthorized from '@/components/unauthorized.vue';
	import nodata from '@/components/nodata.vue';
	export default {
		components: {
			dnItem,
			dishEditPopup,
			unauthorized,
			nodata,
		},
		data() {
			return {
				hdDays: this.$store.getters.get_days,
				dinner_type_category:this.$store.getters.get_dinner_type_category,
				dinner_type_category_obj:this.$store.getters.get_dinner_type_category_obj,
				dish_top_category:this.$store.getters.get_dish_top_category,
				dish_top_category_obj:this.$store.getters.get_dish_top_category_obj,
				number_category:this.$store.getters.get_number_category,
				number_category_obj:this.$store.getters.get_number_category_obj,
				plan_week_model_overall_show: {},
				dish_key_obj: this.$store.getters.get_dish_key_obj,
				dishEditPopupOpen: false,
				dishEditPopupData:{},
				dishEditPopupDisabled:{},
				settingPopupShow: false,
				old_setting: ['dish_num_id'],
				setting: [
					'dish_num_id'
				],
				settingObj: {
					dish_num_id: true
				},
				settingConfig: [{
					label: '序号',
					name: 'dish_num_id'
				}, ],
				modelList: [{
					id: 1,
					label: '模板1'
				}],
				modelIndex: 0,
				dateIndex:0,
				addPickerIndex:[0,0],
				list: [{}],
				focusDish: {},
				copyDish: {},
				exchangeDish: {},
			}
		},
		computed: {
			tableHd() {
				let tableHd = [];
				if (this.settingObj.dish_num_id) {
					tableHd.push({
						title: '序号',
						key: 'dish_num_id',
						style: {
							width: '30px'
						}
					});
				};
				let days = this.$store.getters.get_days;
				days.forEach((v, i) => {
					tableHd.push({
						title: v.title,
						key: v.value,
						style: {
							flex: 1
						}
					})
				})
				return tableHd;
			},
			addPickerList(){
				let list = [[],[]];
				list[0] = this.dinner_type_category.map(v=>{return {
					id:v.id,
					label:v.name
				}})
				list[1] = this.dish_top_category.map(v=>{return {
					id:v.id,
					label:v.name_cn
				}})
				return list;
			},
			dateList(){
				let arr = [
					{id:'2.12-2.15',label:'2.12-2.15'},
					{id:'2.12-2.15',label:'2.12-2.15'},
					{id:'2.12-2.15',label:'2.12-2.15'},
				];
				return arr;
			}
		},
		methods: {
			save(){
				
			},
			bind_date_change(e){
				let index = e.detail.value;
				this.save();
				// this.dateIndex = index;
			},
			addRow(dinner_type_id,dish_top_category_id){
				let list = JSON.parse(JSON.stringify(this.list));
				let dinner_type_name = this.dinner_type_category_obj[dinner_type_id].name;
				let dish_top_category_name = this.dish_top_category_obj[dish_top_category_id].name_cn;
				let rowTopIndex = list.findIndex(v=>v.dinner_type_id == dinner_type_id);
				if(rowTopIndex == -1){
					let _length = list.push({
						dinner_type_id: dinner_type_id,
						dinner_type_name:dinner_type_name ,
						sort:this.dinner_type_category_obj[dinner_type_id].dt_no,
						open: true,
						child: []
					});
					rowTopIndex = _length - 1;
				};
				let rowSecIndex = list[rowTopIndex].child.findIndex(v=>v.dish_top_category_id == dish_top_category_id);
				if(rowSecIndex == -1){
					let _length = list[rowTopIndex].child.push({
						dinner_type_id: dinner_type_id,
						dinner_type_name: dinner_type_name,
						dish_top_category_id: dish_top_category_id,
						dish_top_category_name: dish_top_category_name,
						sort:this.dish_top_category_obj[dish_top_category_id].id,
						open: true,
						child: []
					});
					rowSecIndex = _length - 1;	
				};
				let dish_num_id;
				if(!dish_num_id){
					let _length = list[rowTopIndex].child[rowSecIndex].child.length;
					let last_ctg1_no = 0;
					if(_length != 0){
						let last_dish_num_id = list[rowTopIndex].child[rowSecIndex].child[_length-1].dish_num_id;
						last_ctg1_no = this.number_category_obj[last_dish_num_id].ctg1_no;
					}
					let dish_num = this.number_category.find(v=>v.dish_top_category_id == dish_top_category_id && v.ctg1_no == last_ctg1_no+1);
					dish_num_id = dish_num.id;
				}
				let dish_num_name = this.number_category_obj[dish_num_id].name;
				list[rowTopIndex].child[rowSecIndex].child.push({
					dinner_type_id,
					dinner_type_name,
					dish_top_category_id,
					dish_top_category_name,
					dish_num_id,
					dish_num_name,
					sort:this.number_category_obj[dish_num_id].ctg1_no*10
				});
				list[rowTopIndex].open = true;
				list[rowTopIndex].child[rowSecIndex].open = true;
				this.list = this.sortList(list);
			},
			addRowByDish(upOrDown){
				let list = JSON.parse(JSON.stringify(this.list));
				let { dish,dish_num_id,dish_num_name,dinner_type_id,dinner_type_name,dish_top_category_id,dish_top_category_name,rowTopIndex,rowSecIndex,rowIndex,colKey,key} = this.focusDish;
				let arr = list[rowTopIndex].child[rowSecIndex].child;
				let item = {
					dinner_type_id,
					dinner_type_name,
					dish_top_category_id,
					dish_top_category_name,
				};
				if(upOrDown == 'up'){
					arr.splice(rowIndex,0,item);
				}else{
					arr.splice(rowIndex+1,0,item);
				}
				// 更新dish_num_id
				let dish_num_arr = this.number_category.filter(v=>v.dish_top_category_id == dish_top_category_id);
				dish_num_arr = dish_num_arr.sort((a,b)=>{return a.ctg1_no - b.ctg1_no});
				dish_num_arr.forEach((v,i)=>{
					if(!arr[i]){
						return;
					}
					arr[i].dish_num_id = v.id;
					arr[i].dish_num_name = v.name;
					arr[i].sort = v.ctg1_no*10;
				});
				this.list = list;
			},
			delRow(){
				let list = JSON.parse(JSON.stringify(this.list));
				let { dish,dish_num_id,dish_num_name,dinner_type_id,dinner_type_name,dish_top_category_id,dish_top_category_name,rowTopIndex,rowSecIndex,rowIndex,colKey,key} = this.focusDish;
				let arr = list[rowTopIndex].child[rowSecIndex].child;
				arr.splice(rowIndex, 1);
				if(arr.length == 0){
					list[rowTopIndex].child.splice(rowSecIndex, 1);
					if(list[rowTopIndex].child.length == 0){
						list.splice(rowTopIndex, 1);
					}
				}else{
					// 更新dish_num_id
					let dish_num_arr = this.number_category.filter(v=>v.dish_top_category_id == dish_top_category_id);
					dish_num_arr = dish_num_arr.sort((a,b)=>{return a.ctg1_no - b.ctg1_no});
					dish_num_arr.forEach((v,i)=>{
						if(!arr[i]){
							return;
						}
						arr[i].dish_num_id = v.id;
						arr[i].dish_num_name = v.name;
						arr[i].sort = v.ctg1_no*10;
					});
				}
				this.list = list;	
			},
			bindDish(data) {
				let {
					dish,dish_num_id,dish_num_name,dinner_type_id,dinner_type_name,dish_top_category_id,dish_top_category_name,rowTopIndex,rowSecIndex,rowIndex,colKey
				} = data;
				this.focusDish = {
					key:[rowTopIndex, rowSecIndex, rowIndex, colKey].join('||'),
					dish,dish_num_id,dish_num_name,dinner_type_id,dinner_type_name,dish_top_category_id,dish_top_category_name,rowTopIndex,rowSecIndex,rowIndex,colKey
				};
				let dishEditPopupDisabled = {};
				if(!dish){
					dishEditPopupDisabled.look = true;
					dishEditPopupDisabled.copy = true;
					dishEditPopupDisabled.del = true;
					dishEditPopupDisabled.exchange = true;
				}
				if(!this.copyDish.dish){
					dishEditPopupDisabled.paste = true;
				}else{
					if(this.copyDish.dish_top_category_id != dish_top_category_id){
						dishEditPopupDisabled.paste = true;
					}
				}
				if(!this.exchangeDish.dish){
					dishEditPopupDisabled.doExchange = true;
				}else{
					if(this.exchangeDish.dish_top_category_id != dish_top_category_id){
						dishEditPopupDisabled.doExchange = true;
					}
				}
				this.dishEditPopupData = {
					focusDish: this.focusDish,
					copyDish: this.copyDish,
					exchangeDish: this.exchangeDish,
				};
				this.dishEditPopupDisabled = dishEditPopupDisabled;
				this.dishEditPopupOpen = true;
			},
			closeDishEditPopup() {
				this.dishEditPopupOpen = false;
				this.focusDish = {key:''};
			},
			bindDishEditPopup(action) {
				let _this = this;
				let {
					dish,dinner_type_id,dinner_type_name,dish_top_category_id,dish_top_category_name,rowTopIndex,rowSecIndex,rowIndex,colKey
				} = _this.focusDish;
				switch (action) {
					case "look":
						// console.log("look");
						break;
					case "edit":

						break;
					case "copy":
					  _this.copyDish = _this.focusDish;
						uni.$u.toast('复制成功，请选择粘贴位置');
						break;
					case "paste":
						_this.list[rowTopIndex].child[rowSecIndex].child[rowIndex][colKey] = _this.copyDish.dish;
						_this.copyDish = {};
						break;
					case "exchange":
						_this.exchangeDish = _this.focusDish;
						uni.$u.toast('请选择交换位置');
						break;
					case "doExchange":
					this.list[rowTopIndex].child[rowSecIndex].child[rowIndex][colKey] = _this.exchangeDish.dish;
					this.list[_this.exchangeDish.rowTopIndex].child[_this.exchangeDish.rowSecIndex].child[_this.exchangeDish.rowIndex][_this.exchangeDish.colKey] = _this.focusDish.dish;
					_this.exchangeDish = {};
						break;	
					case "del":
						this.list[rowTopIndex].child[rowSecIndex].child[rowIndex][colKey] = false;
						break;
					case "addUpRow":
						this.addRowByDish('up');
						break;
					case "delRow":
						this.delRow();
						break;
					case "addDownRow":
					  this.addRowByDish('down');
						break;
					default:
						break;
				}
				this.closeDishEditPopup();
			},
			bind_add_picker_change(e){
				let index = e.detail.value;
				let [i1,i2] = index;
				this.addPickerIndex = index;
				let dinner_type_id = this.addPickerList[0][i1].id;
				let dish_top_category_id = this.addPickerList[1][i2].id;
				this.addRow(dinner_type_id,dish_top_category_id);
			},
			bind_model_change(e) {
				let index = e.detail.value;
				this.modelIndex = index;
			},
			openDnItem(rowTopIndex,rowSecIndex,isOpen){
				if(typeof rowSecIndex == 'undefined'){
					this.list[rowTopIndex].open = isOpen;
					if(!isOpen){
						this.list[rowTopIndex].child.forEach(v => {
							v.open = isOpen;
						})
					}
					return;
				}
				if(isOpen){
					this.list[rowTopIndex].open = isOpen;
				}
				this.list[rowTopIndex].child[rowSecIndex].open = isOpen;
			},
			openAll() {
				this.list.forEach(v => {
					v.open = true;
					v.child.forEach(d=>{
						d.open = true;
					})
				})
			},
			closeAll() {
				this.list.forEach(v => {
					v.open = false;
					v.child.forEach(d=>{
						d.open = false;
					})
				})
			},
			openSetting() {
				this.settingPopupShow = true;
			},
			settingPopupClose() {
				this.closeSetting();
			},
			settingPopupOpen() {

			},
			saveSetting() {
				this.updataSettingObj();
				this.settingPopupShow = false;
			},
			updataSettingObj() {
				uni.setStorageSync('planWeekModel-setting', this.setting);
				let settingObj = {};
				this.setting.forEach(v => {
					settingObj[v] = true;
				});
				this.settingObj = settingObj;
				this.old_setting = this.setting;
			},
			closeSetting() {
				this.setting = this.old_setting;
				this.settingPopupShow = false;
			},
			setList() {
				let list = [];
				let id = this.modelList[this.modelIndex].id;
				console.log(this.number_category);
				this.plan_week_model_overall_show[id].forEach(v => {
					let {
						dinner_type_id,
						dish_top_category_id,
						dish_num_id
					} = v;
					let _index = list.findIndex(d => d.dinner_type_id == dinner_type_id[0]);
					if (_index == -1) {
						let _length = list.push({
							dinner_type_id: dinner_type_id[0],
							dinner_type_name: dinner_type_id[1],
							sort:this.dinner_type_category_obj[dinner_type_id[0]].dt_no,
							open: true,
							child: []
						})
						_index = _length - 1;
					}
					let _i = list[_index].child.findIndex(d => d.dish_top_category_id == dish_top_category_id[0]);
					if (_i == -1) {
						let _len = list[_index].child.push({
							dinner_type_id: dinner_type_id[0],
							dinner_type_name: dinner_type_id[1],
							dish_top_category_id: dish_top_category_id[0],
							dish_top_category_name: dish_top_category_id[1],
							sort:this.dish_top_category_obj[dish_top_category_id[0]].id,
							open: true,
							child: []
						})
						_i = _len - 1;
					}
					list[_index].child[_i].child.push({
						...v,
						dinner_type_id: dinner_type_id[0],
						dinner_type_name: dinner_type_id[1],
						dish_top_category_id: dish_top_category_id[0],
						dish_top_category_name: dish_top_category_id[1],
						dish_num_id:dish_num_id[0],
						dish_num_name:dish_num_id[1],
						sort:this.number_category_obj[dish_num_id[0]].ctg1_no*10
					})
				})
				console.log(list);
				this.list = this.sortList(list);
			},
			sortList(list){
				list.sort((a,b)=>{
					return a.sort - b.sort
				});
				list.forEach(v=>{
					if(!v.child) return;
					v.child = this.sortList(v.child);
				});
				return list
			}
		},
		onLoad() {
			try {
				this.plan_week_model_overall_show = this.$store.getters.get_plan_week_model_overall_show;
				let ids = Object.keys(this.plan_week_model_overall_show)
				this.modelList = ids.map(v => {
					return {
						id: v,
						label: '模板' + v
					}
				});
				this.setList();
				// console.log();
			} catch (e) {
				// uni.reLaunch({
				// 	url: '/pages/login/login'
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .icon-btn {
		padding: 3px;
		border: 1px solid #d9d9d9;
		border-radius: 50%;
	}

	/deep/ .icon-btn.active {
		background-color: #675f91;
		border-color: #675f91;
	}

	.tableHd-item {
		padding: 6px 0;
	}

	.blank {
		display: block;
		height: 160upx;
	}
</style>